let maF = document.getElementById("maF");
let datail = document.getElementById("datail");
let home = document.querySelector('.home')
let scr = "";
let id = window.location.href.split("id=")[1];
let url = "http://localhost:1337";
let data = [];
let sum = 1;
let price;
//跳转首页
home.onclick = function() {
    location.href = 'home.html'
}
$.get(url + "/api/v1/products/" + id).then((r) => {
    data.push(r.data);
    data.forEach((v) => (v.amount = 1));
    console.log(data);
    renderList(data);
});
//渲染列表
function renderList(arr) {
    let scr = "";
    arr.forEach((v) => {
        price = v.price;
        createdAt = v.createdAt;
        scr += `

        <div class="magnifier" id="maF">
            <div id="box">
                <div id="box1">
                    <img src="${url + v.coverImage}" alt="">
                    <div id="fdj"></div>

                </div>
                <div id="box2">
                    <img src="${url + v.coverImage}" alt="">
                </div>
            </div>
            <div id="smallArea">
                <img src="${url + v.coverImage}" />

              </div>

        </div>
        <div class="Details" id="datail">
            <div class="product-name">
                <p>${v.name}</p>
                <p>${v.desc}</p>
            </div>
            <div class="commodity-price">
                <p>此商品正在参加聚划算</p>
                <p>
                    <span>价格</span>
                    <span>${"￥" + v.price}</span>
                </p>
            </div>
            <div class="transportation">
                <p>
                    <span style="color:#25252595;margin-left: 10px;">运费</span>
                    <span style="margin-left: 30px;">湖北武汉至郑州√中原区√包邮配送规则包邮配送规则
                    </span>
                </p>
                <p>
                    <span  style="color:#25252595;margin-left: 10px;">重量</span>
                    <span style="margin-left: 30px;">0.36kg</span>
                </p>
            </div>
            <div class="sales">
                <p>
                    <span>月销量 <b>900+</b> </span>
                    <span>|</span>
                    <span>送天猫积分 <i>12</i></span>
                </p>
            </div>
            <div class="quantity">
                <div>
                      <span>颜色分类</span>
                   <span>数量</span>
                   <span>服务</span>
                </div>


                <div>
                    <p>
                        <img src="" alt="">
                    </p>
                    <p>
                        <span><input type="text" value="${
                          v.amount
                        }" id='tex'></span>
                        <span id="ospan">
                            <input type="button" value="↑" id="jia">
                            <input type="button" value="↓" id="jian">
                        </span>
                        <span>件&nbsp;有货</span>
                    </p>
                    <p>
                        <span>全面保修二年</span>
                        <span>延长保修一年</span>
                        <span>意外保修二年</span>
                    </p>
                </div>





            </div>
            <div class="shopping-cart">
                <p id='bnt'>加入购物车</p>
                <p id="bot">进入购物车</P>
            </div>
        </div>
    </header>
          `;
    });
    maF.innerHTML = scr;
    // 放大镜
    function qu(id) {
        return document.getElementById(id);
    }
    class Zox {
        constructor() {
            this.box = qu("box");
            this.box1 = qu("box1");
            this.Img = this.box1.children[0];
            this.fdj = qu("fdj");
            this.box2 = qu("box2");
            this.Img1 = this.box2.children[0];
            this.smallArea = qu("smallArea");
            this.smallImg = this.smallArea.children;

            this.move();
        }
        move() {
            this.box1.onmouseover = () => {
                this.fdj.style.display = "block";
                this.box2.style.display = "block";
                this.w = this.box1.offsetWidth - this.fdj.offsetWidth;
                this.h = this.box1.offsetHeight - this.fdj.offsetHeight;
            };
            this.box1.onmouseout = () => {
                this.fdj.style.display = "none";
                this.box2.style.display = "none";
            };
            this.box1.onmousemove = (e) => {
                let evt = e || event;
                let l = evt.pageX - this.box.offsetLeft - this.fdj.offsetWidth / 2;
                let t = evt.pageY - this.box.offsetTop - this.fdj.offsetHeight / 2;
                l = l <= 0 ? 0 : l >= this.w ? this.w : l;
                t = t <= 0 ? 0 : t >= this.h ? this.h : t;
                this.fdj.style.left = l + "px";
                this.fdj.style.top = t + "px";
                this.Img1.style.left =
                    (-l * this.box1.offsetWidth) / this.fdj.offsetWidth + "px";
                this.Img1.style.top =
                    (-t * this.box1.offsetHeight) / this.fdj.offsetHeight + "px";
            };

            for (let i = 0; i < this.smallImg.length; i++) {
                this.smallImg[i].onclick = () => {
                    this.Img1.src = this.Img.src = this.smallImg[i].src;
                };
            }
        }
    }
    new Zox();

    //总价
    function priceAll() {
        numprice = tex.value * price;
        $("#priceAll").text("￥" + parseInt(numprice));
    }
    priceAll();
    let jia = document.getElementById("jia");
    let jian = document.getElementById("jian");
    let bnt = document.getElementById("bnt");
    let bot = document.getElementById("bot");
    //数量变化

    jia.onclick = function() {
        tex.value++;
    };
    jian.onclick = function() {
        tex.value--;
        if (tex.value <= 1) {
            tex.value = 1;
        }
        priceAll();
    };
    // 跳转购物车
    bot.onclick = function() {
        location.href = "cart.html";
    };
    bnt.onclick = function() {
        console.log(price);
        axios({
            url: url + "/api/v1/shop_carts",
            method: "post",
            data: {
                product: id,
                price: price,
                amount: tex.value
            },
            headers: {
                token: localStorage.getItem("token"),
            },
        }).then((r) => {
            console.log(r);
        });
    };
}